<template>
  <div class="app-container">
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="model-remark">注：本页根据昨日数据来计算，而非实时数据</el-col>
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
      <el-card>
        <div class="model-data">
          <div class="item">
            <span>总订单</span>
            <div><span class="num">{{ info['orderCount'] }}</span><span>单</span></div>
            <router-link to="/order/list">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
          <div class="item">
            <span>已付款</span>
            <div><span class="num">{{ info['payOrderCount'] }}</span><span>单</span></div>
            <router-link to="/order/list">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
          <div class="item">
            <span>总金额</span>
            <div><span class="num">{{ info['orderAmount'] }}</span><span>元</span></div>
            <router-link to="/order/list">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="margin-top-20">
      <el-card>
        <div slot="header">各项指标</div>
        <el-col :span="8">
          <el-form label-width="140px">
            <el-form-item label="订单总数">{{ info['showChartData']['list']['orderCount'] }}</el-form-item>
            <el-form-item label="总金额">{{ info['showChartData']['list']['orderAmount'] }}</el-form-item>
            <el-form-item
              v-for="item in info['showChartData']['data']"
              :key="item['name']"
              :label="item['name']">
              {{ item['value'] }}
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="16" align="center">
          <el-radio-group v-model="select" size="small">
            <el-radio-button :label="0">7日订单指标</el-radio-button>
            <el-radio-button :label="1">15日订单指标</el-radio-button>
            <el-radio-button :label="2">30日订单指标</el-radio-button>
          </el-radio-group>
          <pie-chart :chart-data="info.showChartData" class="margin-top-20"/>
        </el-col>
      </el-card>
    </el-col>

    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="margin-top-20">
      <el-card>
        <el-date-picker
          v-model="search['date']"
          class="margin-right-20"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="()=>pagination['load']()"/>
        <ws-pagination v-model="pagination" class="margin-top-20">
          <el-table-column prop="time" label="时间" min-width="200" header-align="center" align="center"/>
          <el-table-column prop="totalCount" label="订单总数" min-width="150" header-align="center" align="center"/>
          <el-table-column prop="completeCount" label="已完成" min-width="150" header-align="center" align="center"/>
          <el-table-column prop="payCount" label="已支付" min-width="150" header-align="center" align="center"/>
          <el-table-column prop="noPayCount" label="待支付" min-width="150" header-align="center" align="center"/>
          <el-table-column label="累计金额" min-width="150" header-align="center" align="center" fixed="right">
            <template slot-scope="scope">
              <el-tag type="danger">
                {{ scope.row['money'] }}
              </el-tag>
            </template>
          </el-table-column>
        </ws-pagination>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import PieChart from './components/PieChart'
export default {
  components: {
    PieChart
  },
  data() {
    return {
      select: 0,
      // 数据
      info: {
        // 订单总数
        orderCount: 0,
        // 总金额
        orderAmount: 0,
        // 已付款订单
        payOrderCount: 0,
        // 饼图数据
        showChartData: {
          'title': '7日订单指标',
          'data': [
            {value: 0, name: '已付款'},
            {value: 0, name: '待付款'},
            {value: 0, name: '作废'}
          ],
          'list': {
            orderAmount: 0,
            orderCount: 0
          }
        },
        chartData: []
      },
      // 查询条件
      search: {
        // 时间
        date: [],
        // 时间起点
        startTime: '',
        // 时间终点
        endTime: ''
      },
      pagination: {}
    }
  },
  watch: {
    select: {
      handler(val) {
        this.info.showChartData = this.info.chartData[val];
      }
    }
  },
  created() {
    // 初始化分页器
    this.initPagination();
    this.loadData()
  },
  methods: {
    loadData() {
      (async () => {
        const result = await this.$service.applicationGetStatisticsDetails();
        if (result.code === 0) {
          const temp = result.data || {};
          temp.showChartData = result.data.chartData[0];
          Object.assign(this.info, temp);
          // console.log(this.info)
        } else {
          this.$message.error(result.msg || '系统错误');
        }
      })();
    },
    // 初始化分页器
    initPagination() {
      // 创建分页器
      this.pagination = new this.$pagination(async (...args) => {
        // 加载分页列表
        this.search.startTime = null;
        this.search.endTime = null;
        this.search.date && this.search.date.length !== 0 && (this.search.startTime = this.search.date[0], this.search.endTime = this.search.date[1])
        const result = await this.$service.applicationGetOrderStatisticsDetails({
          ...args[0],
          startTime: this.search.startTime,
          endTime: this.search.endTime
        });
        if (result.code !== 0) {
          return this.$message.error(result.msg || '系统错误');
        }
        return result;
      });
      // 加载分页数据
      this.pagination.load();
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';

  .model-remark{
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    background-color: white;
    margin-bottom: 20px;
    padding: 0 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .model-data {
    height: 108px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .item {
      flex: 1;
      padding-left: 12%;
      border-right: 1px solid $gray;

      &:last-child {
        border-right: none;
      }

      span {
        font-size: 14px;
      }

      div {
        margin-top: 16px;

        .num {
          font-size: 26px;
          margin-right: 10px;
        }
      }
    }
  }
  .el-form-item{
    margin-bottom: 12px;
  }
</style>

